<template>
    <div class="koi-flex">
        <KoiCard>
            <!-- 搜索条件 -->
            <el-form v-show="showSearch" :inline="true">
                <el-form-item label="服务标识" prop="appId">
                    <el-input placeholder="请输入服务标识" v-model="searchParams.appId" clearable style="width: 200px"
                        @keyup.enter.native="handleListPage"></el-input>
                </el-form-item>
                <el-form-item label="接口名称" prop="name">
                    <el-input placeholder="请输入服务标识" v-model="searchParams.name" clearable style="width: 200px"
                        @keyup.enter.native="handleListPage"></el-input>
                </el-form-item>
                <el-form-item label="接口地址" prop="pathStr">
                    <el-input placeholder="请输入服务标识" v-model="searchParams.pathStr" clearable style="width: 200px"
                        @keyup.enter.native="handleListPage"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="search" plain v-debounce="handleSearch">搜索</el-button>
                    <el-button type="danger" icon="refresh" plain v-throttle="resetSearch">重置</el-button>
                </el-form-item>
            </el-form>

            <!-- 表格头部按钮 -->
            <el-row :gutter="10">
                <KoiToolbar v-model:showSearch="showSearch" @refreshTable="handleListPage"></KoiToolbar>
            </el-row>

            <br />
            <!-- 数据表格 :data="tableList" -->
            <el-table v-loading="loading" border :data="tableList" empty-text="暂时没有数据哟🌻">
                <el-table-column label="服务标识" prop="appId" align="center" width="220px" :show-overflow-tooltip="true">
                    <template #default="scope">
                        <span v-if="scope.row.hasOwnProperty('appId') && scope.row.appId">
                            {{ scope.row.appId }}
                        </span>
                        <el-tag v-else type="primary">中台服务</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="接口名称" prop="name" align="center"
                    :show-overflow-tooltip="true"></el-table-column>
                <el-table-column label="接口地址" prop="url" align="center" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column label="接口类型" prop="role" align="center" width="100px">
                    <template #default="scope">
                        <KoiTag :tagOptions="methodTypeOptions" :value="scope.row.method"></KoiTag>
                    </template>
                </el-table-column>
                <el-table-column label="接口描述" prop="description" align="center">
                    <template #default="scope">
                        <span v-if="scope.row.description">
                            <!-- 当存在 description 时，使用 el-popover 显示详细内容 -->
                            <el-popover trigger="hover" placement="top" width="300">
                                <p>{{ scope.row.description }}</p>
                                <template #reference>
                                    <el-tag>{{ scope.row.description }}</el-tag>
                                </template>
                            </el-popover>
                        </span>
                        <span v-else>暂无描述</span> <!-- 当 description 为空时，显示“暂无描述” -->
                    </template>
                </el-table-column>
            </el-table>
            <br />

            <!-- 分页 -->
            <el-pagination background v-model:current-page="searchParams.page" v-model:page-size="searchParams.pageSize"
                v-show="total > 0" :page-sizes="[10, 20, 50, 100, 200]" layout="total, sizes, prev, pager, next, jumper"
                :total="total" @size-change="handleListPage" @current-change="handleListPage" />
        </KoiCard>
    </div>
</template>

<script setup lang="ts" name="apiPage">
// 已使用字典案例
import { nextTick, ref, reactive, onMounted } from "vue";
// @ts-ignore
import {
    koiNoticeSuccess,
    koiNoticeError,
    koiMsgError,
    koiMsgBox,
    koiMsgBoxPrompt
} from "@/utils/koi.ts";
import { getAllApi } from "@/api/system/api";

// 数据表格加载页面动画
const loading = ref(false);
/** 是否显示搜索表单 */
const showSearch = ref<boolean>(true); // 默认显示搜索条件
// 数据表格数据
const tableList = ref<any>([]);

// 查询参数
const searchParams = ref<any>({
    page: 1, // 第几页
    pageSize: 10, // 每页显示多少条

    appId: "",
    name: "",
    pathStr: ""
});

const total = ref<number>(0);

// 重置搜索参数
const resetSearchParams = () => {
    searchParams.value = {
        page: 1,
        pageSize: 10,
        appId: "",
        name: "",
        pathStr: ""
    };
};

/** 搜索 */
const handleSearch = () => {
    searchParams.value.page = 1;
    handleListPage();
};

/** 重置 */
const resetSearch = () => {
    resetSearchParams();
    handleListPage();
};

/** 数据表格 */
const handleListPage = async () => {
    try {
        loading.value = true;
        tableList.value = []; // 重置表格数据

        function removeEmptyKeys(obj: any) {
            Object.keys(obj.value).forEach(key => {
                if (obj.value[key] === "" || obj.value[key] === null || obj.value[key] === undefined) {
                    delete obj.value[key];
                }
            });
        }

        removeEmptyKeys(searchParams);

        const res: any = await getAllApi(searchParams.value);
        tableList.value = res.data;
        total.value = res.total;
    } catch (error) {
        console.log(error);
        total.value = 0;
        koiNoticeError("列表数据查询失败，请刷新重试");
    } finally {
        loading.value = false;
    }
};

const methodTypeOptions = ref<any>([
    {
        dictLabel: "get",
        dictValue: "get",
        dictTag: "primary",
        dictColor: ""
    },
    {
        dictLabel: "delete",
        dictValue: "delete",
        dictTag: "danger",
        dictColor: ""
    },
    {
        dictLabel: "post",
        dictValue: "post",
        dictTag: "success",
        dictColor: ""
    },
    {
        dictLabel: "put",
        dictValue: "put",
        dictTag: "warning",
        dictColor: ""
    },
    {
        dictLabel: "patch",
        dictValue: "patch",
        dictTag: "info",
        dictColor: ""
    },
]);

onMounted(() => {
    // 获取数据表格数据
    handleListPage();
});
</script>

<style lang="scss" scoped>
// 穿梭框高度调整
:deep(.el-transfer-panel__body) {
    height: 400px;
}
</style>